import React from 'react'
// import StateTest from './components/StateTest/StateTest'
import StateTest from './components/StateTest' // 自动加载文件夹下的index.jsx



/* 
组件标签名要首字母大写  => 区别于html标签(要小写)
不做任何显示: return null
*/

/* 
函数组件
返回组件界面(就是一个用jsx创建的虚拟DOM)
什么时候调用组件函数: 渲染组件标签时(而不是创建组件标签时)
函数组件是不会创建实例对象
*/
/* function App() {
  console.log('App', this) // this是undefined
  // return null
  return <div>
    <h2>App Title</h2>
    <p>App Content</p>
  </div>
} */

/* 
类组件
  继承于 React.Component
  定义render方法, 返回组件界面
  在渲染组件标签时: 先创建组件类的实例, 再通过实例调用render()返回虚拟DOM
*/

/* 
App是StateTest的父组件
StateTest是App的子组件
*/
class App extends React.Component {
  render () {
    // console.log('render()', this) // this是组件实例对象(简称: 组件对象)


    return <div>
      <StateTest />
      <StateTest />
      <StateTest />
      <StateTest />
    </div>
  }
}

export default App